<template>
  <div style="margin-top: 8px;">
    <!--工具条-->
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="流程名称" label-width="100px">
            <el-input
              placeholder="流程名称"
              size="small"
              v-model="queryparam.fprocessname"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程编码" label-width="100px">
            <el-input
              placeholder="流程编码"
              size="small"
              v-model="queryparam.fprocesscode"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程分类" label-width="100px">
            <el-input
              placeholder="流程分类"
              size="small"
              v-model="queryparam.fprocesstypecode"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程版本" label-width="100px">
            <el-input
              placeholder="流程版本"
              size="small"
              v-model="queryparam.fversion"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="$refs.gridlist.loadData(1)"
            style="margin-left: 10px;"
            >查询</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="addProcess()"
            style="margin-left: 10px;"
            >新增</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <pagetable
          ref="gridlist"
          :queryparam="queryparam"
          :apiajaxfun="apiajaxfun"
          :tablecol="tablecol"
          :colSlots="scopedSlots"
        >
          <template slot="fstate" slot-scope="record"
            >{{ flowState[record.row.fstate] }}
          </template>
          <template slot="operation" slot-scope="record">
            <el-button
              @click="editProcess(record.row)"
              v-if="record.row.fstate === 3 || record.row.fstate === 1"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              v-if="record.row.fstate === 3 || record.row.fstate === 1"
              @click="deleteProcess(record.row)"
              size="small"
              >删除</el-button
            >

            <el-button
              type="text"
              v-if="record.row.fstate === 3 || record.row.fstate === 1"
              @click="startUpProcess(record.row)"
              size="small"
              >启动</el-button
            >
            <el-button
              type="text"
              @click="startProcess(record.row)"
              v-if="record.row.fstate === 2"
              size="small"
              >发起</el-button
            >
            <el-button
              type="text"
              @click="stopProcess(record.row)"
              v-if="record.row.fstate === 2"
              size="small"
              >停用</el-button
            >
            <el-button
              type="text"
              @click="saveAsProcess(record.row)"
              size="small"
              >另存为</el-button
            >
          </template>
        </pagetable>
      </el-col>
    </el-row>
    <a-modal
      :visible="flowdesigndialog"
      wrapClassName="ant-modal-centered dialog is-portal-color window-max hiddenoverflow"
      width="100%"
      :zIndex="799"
      :footer="null"
      :bodyStyle="{ padding: '0px' }"
      :closable="true"
      :destroyOnClose="true"
      @cancel="flowdesigndialog = false"
    >
      <Flowdesign
        :processId="processId"
        ref="Flowdesign"
        :processState="processState"
      ></Flowdesign>
    </a-modal>
    <zhlDialog
      title="另存为"
      ref="saveAsProcessdialog"
      width="600px"
      class="my-dialog"
    >
      <el-form ref="elFormSaveAsProcess" size="medium" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="流程名称" label-width="100px">
              <el-input
                placeholder="流程名称"
                size="small"
                v-model="saveAsProcessParam.processname"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="流程编码" label-width="100px">
              <el-input
                placeholder="流程编码"
                size="small"
                v-model="saveAsProcessParam.processcode"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item size="large" style="    height: 60px;">
          <el-button type="primary" @click="submitSaveAsProcess"
            >提交</el-button
          >
          <el-button @click="$refs.saveAsProcessdialog.visible = false"
            >关闭</el-button
          >
        </el-form-item>
      </el-form>
    </zhlDialog>
  </div>
</template>
<script>
import {
  queryProcess,
  optDelProcess,
  optStartProcess,
  optStopProcess,
  optSaveAsProcess
} from '@/api/tappProcess.js'
import pagetable from '@/components/pagetable/index.vue'
import Flowdesign from './Flowdesign.vue'
export default {
  props: ['fromtype'],
  components: { pagetable, Flowdesign },
  data() {
    return {
      flowdesigndialog: false,
      queryparam: {
        fprocessname: '',
        fprocesscode: '',
        fprocesstypecode: '',
        fversion: ''
      },
      scopedSlots: ['operation', 'fstate'],
      questionName: '',
      apiajaxfun: queryProcess,
      processState: 0,
      tablecol: [
        {
          title: '操作',
          dataIndex: 'operation',
          width: 150,
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        },
        {
          title: '流程名称',
          dataIndex: 'fprocessname',
          width: 150,
          scopedSlots: { customRender: 'fprocessname' },
          align: 'center'
        },
        {
          title: '流程编码',
          dataIndex: 'fprocesscode',
          width: 150,
          scopedSlots: { customRender: 'fprocesscode' },
          align: 'center'
        },
        {
          title: '流程类型',
          dataIndex: 'fprocesstypecode',
          width: 150,
          scopedSlots: { customRender: 'fprocesstypecode' },
          align: 'center'
        },
        {
          title: '流程版本',
          dataIndex: 'fversion',
          width: 150,
          scopedSlots: { customRender: 'fversion' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'fstate',
          width: 150,
          scopedSlots: { customRender: 'fstate' },
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'fcreationdate',
          width: 150,
          scopedSlots: { customRender: 'fcreationdate' },
          align: 'center'
        },
        {
          title: '最后修改时间',
          dataIndex: 'flastupdatedate',
          width: 150,
          scopedSlots: { customRender: 'flastupdatedate' },
          align: 'center'
        },
        {
          title: '最后修改人',
          dataIndex: 'FLastUpdateBy',
          width: 150,
          scopedSlots: { customRender: 'FLastUpdateBy' },
          align: 'center'
        }
      ],
      flowState: ['草稿', '已启动', '已停止', '历史'],
      processId: '',
      saveAsProcessParam: {
        processname: '',
        processcode: '',
        processId: ''
      }
    }
  },
  created() {},
  methods: {
    editProcess(rows) {
      this.flowdesigndialog = true
      this.processId = rows.fid
      this.processState = rows.fstate
      if (this.$refs.Flowdesign !== undefined) {
        this.$refs.Flowdesign.loadFlowDesign(this.processId, this.processState)
      }
    },
    addProcess() {
      this.processId = undefined
      this.flowdesigndialog = true
      if (this.$refs.Flowdesign !== undefined) {
        this.$refs.Flowdesign.loadFlowDesign()
      }
    },
    deleteProcess(rows) {
      this.$confirm('此操作将永久删除该流程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        optDelProcess(rows.fid).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.$refs.gridlist.loadData(1)
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    startUpProcess(rows) {
      optStartProcess(rows.fid).then(res => {
        if (res.code === 0) {
          this.$message.success('启动成功！')
          this.$refs.gridlist.loadData(1)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    startProcess(rows) {
      const routeData = this.$router.resolve({
        path: '/ProcessFrom',
        query: {
          processid: rows.fid
        }
      })
      window.open(routeData.href)
    },
    stopProcess(rows) {
      this.$confirm('确定停止该流程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        optStopProcess(rows.fid).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.$refs.gridlist.loadData(1)
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    saveAsProcess(rows) {
      this.$refs.saveAsProcessdialog.visible = true
      this.saveAsProcessParam.processId = rows.fid
      this.saveAsProcessParam.processname = ''
      this.saveAsProcessParam.processcode = ''
    },
    submitSaveAsProcess() {
      if (this.saveAsProcessParam.processname === '') {
        this.$message.error('流程名称不能为空。')
        return
      }
      if (this.saveAsProcessParam.processcode === '') {
        this.$message.error('流程编码不能为空。')
      }
      optSaveAsProcess(this.saveAsProcessParam).then(res => {
        if (res.code === 0) {
          this.$message.success('操作成功！')
          this.$refs.gridlist.loadData(1)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
